<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="img/logo.ico">
    <title>Labs-阅读FM</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>

    <!-- 导航栏 -->
    <div class="hd">
        <div class="content hd-wp">
            <div class="logo">
                <a href="javascript:;" class="font">
                    <span class="mlogo fl row">
                        <span class="logo-a fl"></span>
                        <span class="logo-b fl"></span>
                        <span class="logo-c fl"></span>
                    </span>
                </a>
            </div>
            <div class="menu">
                <a href="javascript:;">阅读</a>
                <a href="javascript:;">阅读</a>
                <a href="javascript:;">阅读</a>
                <a href="javascript:;">阅读</a>
                <a href="javascript:;">阅读</a>
                <a href="javascript:;">阅读</a>
            </div>
            <div class="search">
                <form action="" method="POST">
                    <input type="text" class="txt" name="username">
                    <button type="submit" class="iptt"> </button>
                    <i class="iconfont icon-sousuo"></i>

                </form>
            </div>


            <div class="logo" id="login">
                <div class="aaa">
                    <a class="btn-login" href="javascript:;">登录</a>
                    <a class="btn-register" href="javascript:;">注册</a>
                </div>
                <div class="masking">
                    <div class="login">
                        <p class="close delete">x</p>
                        <h3>登录</h3>
                        <form action="" id="login1">
                            <input type="text" name="username" placeholder="用户名" class="ipttn">
                            <br>
                            <input type="password" name="password" placeholder="密码" class="password">
                            <button type="submit">登录</button>
                        </form>
                        <div class="check">
                            <input type="checkbox" value="1" class="gou">下次自动登录
                            <p>记录密码</p>
                        </div>

                    </div>
                    <div class="register">
                        <p class="close del">x</p>
                        <h3>注册</h3>
                        <form id="form">
                            <input type="text" placeholder="昵称" class="btn" name="username">
                            <input type="text" name="usernameemail" placeholder="邮箱" class="ipt">
                            <br>
                            <input type="password" name="password" placeholder="密码" id="pwd">
                            <input type="password" name="repassword" placeholder="确认密码">
                            <button type="submit">注册</button>
                            <!-- <input type="submit" name="" id=""> -->
                        </form>

                        <div class="check">
                            <input type="checkbox" value="1" class="gou">下次自动登录
                            <p>记录密码</p>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <!-- 爱因斯坦的梦 -->
    <div class="content bd">
        <div class="wp fl">
            <!-- 第一块开始 -->
            <div class="item">
                <!-- <div class="item-base">爱因斯坦的梦————因果不定的世界</div>
                <div class="item-meta">
                    <span class="f">
                        播放<span class="f16">2019</span>
                        次
                    </span>
                    <em><span class="iconfont icon-bi"></span>艾伦.来特曼</em>
                    <em><span class="iconfont icon-yuyin"></span>微微</em>
                    <em><span class="iconfont icon-shizhong"></span>10:58</em>
                </div>
                <div class="tiem-pic">
                    <img src="img/1.png" alt="爱因斯坦的梦--因果不定的世界 - 阅读FM">
                </div>
                <div class="yd-container">
                    <div class="yd-cotrols">
                        <div class="jp-play">
                            <a href=""><i class="iconfont icon-caret-right"></i></a>
                        </div>
                        <div class="jp_container">00:00</div>
                        <div class="yd-progress"></div>
                    </div>
                </div> -->
            </div>
            <!-- 第一块结束 -->
            <!-- 文章 -->
            <div class="item-intro">
                <div class="cont">
                    <span></span>
                    <div class="div">
                        <!-- 1905年5月3日 <br>
                        在这个世界里，每一个吐出的字，只向吐出的瞬间倾诉；每个眼波流动的一瞥，只有一意；每个手指轻柔的一触，没有过去，也没有未来。<br><br>

                        想想一个因果错乱的世界。有时一先于二，有时二先于一。也许，因总在过去，果长在将来，但将来和过去却纠缠不清。 <br><br>

                        从蓬特斯高台望去，景色壮丽：阿尔卑斯山直插入天，阿勒河行于地。此刻有位男子站在那儿，茫茫然掏空衣袋，伤心哭着。朋友们无缘无故地抛弃了他。再没人约他吃晚饭下酒馆，邀他来家里作客。二十年来他一直都是个理想的朋友：大方，有情趣，有爱心，和颜悦色。究竟发生了什么？距此一个星期在这高台上，同一个人开始乱来，逢人便得罪，一毛不拔，乱头粗服，劳喷大街他的公寓谁都不让去。哪个是将来，哪个是过去？哪个是因，哪个是果？<br><br>

                        在苏黎世议会最近通过了严格的法令，禁止向公众出售枪支。银行商号都要定期查账。来访者，无论走利马特的水路，还是走塞尔拿的铁道，都要搜一搜看是否在偷运军火。保安力量增加了一倍。严打之后一个月，苏黎世发生了空前的恶性犯罪，青天白日下瓦因广场人被杀，空斯特艺术馆画被盗，缪斯托教堂里觥筹交错。没准这些罪行时间上错了位？或许新法令反倒是肇事者?
                        <br>
                        <br>
                        一位年轻女子坐在植物园的喷泉附近。她每星期天都来这儿亲近白色紫罗兰、麝香野蔷薇、粉色桂竹香。忽然间，她的心儿飘，脸儿烧，步履浮躁，无由地欢喜。数日后，她遇见一位小伙子，爱得死去活来。两件事难道无关？要是有，又是凭的哪种奇怪关系、错乱时序、颠倒因缘？
                        <br>
                        <br>
                        <br>
                        在这个无因果的世界里，科学家算是无望了。他们的预报都成了马后炮，他们的推导公式也只起点儿解释说明的作用。合乎逻辑落得个悖乎事理。科学家像上了瘾的赌棍一样信口雌黄，喋喋不休。科学家成了小丑，倒不是因为他们理性，而是因为宇宙不理性。也许不是因为宇宙不理性，而是因为他们理性。谁又能说谁是谁不是，在这无因果的世界里？
                        <br><br>

                        在这个世界里，艺术家可乐了。他们绘画、音乐和小说的生命就在于出其不意。他们喜欢预测不到、解释不了的事情，喜欢怀旧梦寻。 <br>
                        <br>
                        多数人都学会了如何生活在此刻。既然过去对现在的影响根本说不准，那就别管过去。既然现在对于将来没多大要紧，那就用不着三思而后行。每一行动都是时间的岛屿，评说全在乎本身。亲人体贴快死的舅舅，不是预备回头接收遗产，而是因为如今爱他。一个人找到份差事，凭的不是好履历，而是求职谈话时的好表现。老板踩一脚伙计便回一拳，因为不必担心将来。这是个心血来潮的世界，是个率情率性的世界。在这个世界里，每个字只就此刻说，每个眼神只一层含意，每回触摸无过去也无将来，每次亲吻除了亲吻还是亲吻。
                        <br> -->
                    </div>
                    <a href="javeacript:;" class="a">展开全文</a>
                </div>

            </div>
            <!-- 精灵图 -->
            <div class="item-f fl">
                <div class="fol"> <strong>标签:</strong>
                    <a href="javascript:;">艾伦.来特曼</a>
                    <a href="javascript:;">时间</a>
                    <a href="javascript:;">梦</a>
                    <a href="javascript:;">薇薇</a>
                </div>
                <div class="for">
                    <a href="javascript:;" class="bdx_1"></a>
                    <a href="javascript:;" class="bdx_2"></a>
                    <a href="javascript:;" class="bdx_3"></a>
                    <a href="javascript:;" class="bdx_4"></a>
                </div>

            </div>
            <div class="item-pg">
                <span>
                    < 上一篇</span> </div> <div class="comments">
                        <form action="" class="comment-post">
                            <input placeholder="说点什么" type="text" class="content-text" name="text">
                            <div type="submit" class="comment-btn">评论</div>
                        </form>
            </div>
            <div class="comment-list">
                <div class="tab">最新评论<span>0</span></div>

                <div class="comments-dom">
                    <!-- <div class="conmmentlist">
                        <div class="comment-avatar"><img src="img/5.png" alt=""></div>
                        <div class="comment-c">
                            <div>kassing1 <span>2019/08/15 11:17</span></div>
                            <div>不错</div>
                        </div>
                    </div> -->
                </div>

                <!-- 底部 -->
                <div class="dibu content">
                    <div class="left">
                        <div class="top">关于我们 | 加入我们</div>
                        <div class="bottom">
                            © 2010-2016 Yuedu.fm All rights reserved 粤ICP备14076392号</div>
                    </div>
                    <div class="right">
                        <div><span class="iconfont icon-dashang
                            "></span>
                        </div>
                        <div><span class="iconfont icon-weixin"></span>
                        </div>
                        <div><span class="iconfont icon-weibo"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 右边1 -->
        <div class="side fr">
            <div class="s-user">
                <div class="left"><img src="./img/7.png"></div>
                <div class="moddle">
                    <p>薇薇<span class="iconfont icon-yuyin"></span></p>
                    <p class="top">作品：31</p>
                    <p>粉丝：117</p>
                </div>
                <div class="right">关注 </div>
            </div>
            <div class="bottom">
                <div class="font1 font2"><span class="iconfont icon-changyongicon-"></span></div>
                <div class="font">1</div>
                <div class="font1"><span class="iconfont icon-xin"></span></div>
                <div class="font">2</div>
                <div class="font1"><span class="iconfont icon-dashang"></span></div>
            </div>

            <!-- 右边2 -->
            <div class="related">
                <h3>
                    <div class="left"></div>
                    <span> 其他相关节目</span>
                    <div class="right"><span class="left">
                            <</span> <span class="right">>
                        </span></div>
                </h3>
                <div class="div">
                    <ul class="related-list">
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                        <li><img src="img/4.png"><span>一路有你</span></li>
                    </ul>
                </div>
                <div class="channel-item">
                    <h3>
                        <div class="left"></div>
                        <span> 阅读FM频道其他节目</span>
                        <div class="right"><span class="left">查看全部</span><span class="right">></span></div>
                    </h3>
                    <ul class="channel-list">
                        <li><a href="javascript:;">春天的窗户</a>

                            <div><span>文：安房直子</span><span>直播：青豚</span></div>

                        </li>
                        <li><a href="javascript:;">春天的窗户</a>

                            <div><span>文：安房直子</span><span>直播：青豚</span></div>

                        </li>
                        <li><a href="javascript:;">春天的窗户</a>

                            <div><span>文：安房直子</span><span>直播：青豚</span></div>

                        </li>
                        <li><a href="javascript:;">春天的窗户</a>

                            <div><span>文：安房直子</span><span>直播：青豚</span></div>

                        </li>
                        <li><a href="javascript:;">春天的窗户</a>

                            <div><span>文：安房直子</span><span>直播：青豚</span></div>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 设置遮罩层 -->
    <div class="mask">正在加载......</div>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/index.js"></script>
    <script src="js/login.js"></script>
    <script>
        //淡入遮罩层
        $(".mask").fadeIn(1000)

            ` <div>
            <div class="comment-avatar"><img src="img/5.png" alt=""></div>
                <div class="comment-c">
                    <div>kassing1 <span>2019/08/15 11:17</span></div>
                    <div>不错</div>
                </div>
            </div>`
    </script>
    <script>
        var article_id = getParams("id");
        function getParams(key) {
            var str = location.search;
            var reg = new RegExp(key + "=([^&]*)");
            reg.test(str);
            return RegExp.$1;
        }
        function jsonp(url, data, cb) {
            var f = "fn_" + Date.now() + Math.floor(Math.random() * 1000000);
            window[f] = cb;
            url = data ? url + "?" + data + "&cb=" + f : url + "?cb=" + f;
            $(`<script src="${url}"><\/script>`).appendTo("body");
            console.log(url);
        }
    </script>
    <script>
        var index;
        jsonp("http://localhost/20190917/yueduziji/index2.php", "id=" + article_id, function (data) {
            console.log(data)

            //获取文章ID
            var ID = data.id


            // <div class="item-base">爱因斯坦的梦————因果不定的世界</div>
            //     <div class="item-meta">
            //         <span class="f">
            //             播放<span class="f16">2019</span>
            //             次
            //         </span>
            var html = "";
            html = ` <div id="item-base" class="item-base" data-pid=${data.id}>${data.title}</div>
                            <div class="item-meta">
                                <span class="f">
                                    播放<span class="f16">${data.play_time}</span>
                                    次
                    </span>
                                <em><span class="iconfont icon-bi"></span>${data.author}</em>
                                <em><span class="iconfont icon-yuyin"></span>${data.podcast}</em>
                                <em><span class="iconfont icon-shizhong"></span>${data.duration}</em>
                            </div>
                            <div class="tiem-pic">
                                <img src="${data.img_url}" alt="爱因斯坦的梦--因果不定的世界 - 阅读FM">
                     </div>
                                <div class="yd-container">
                                    <div class="yd-cotrols">
                                        <div class="jp-play">
                                            <a href=""><i class="iconfont icon-caret-right"></i></a>
                                        </div>
                                        <div class="jp_container">${data.duration}</div>
                                        <div class="yd-progress"></div>
                                    </div>
                                </div>`

            //清除遮罩层
            $(".mask").fadeOut(500, function () {
                $(this).remove()
            })
            $(".item").html(html)
            $(".div").html(`${data.content}`)
            index = $("#item-base").data("pid")
            console.log(index)
            $.getJSON("http://localhost/20190918/api/list.php", { article_id: index }, function (data) {
                console.log(data)
                var uid = 1
                var tem = $("#temp").html()
                var html = "";
                if (data.code == 200) {
                    //判断评论条数
                    var dataLength = data.list.length;
                    $(".comment-list .tab span").html((dataLength));
                    for (var i = 0; i < data.list.length; i++) {
                        html += ` 
                            <div class="conmmentlist" data-pid="${data.list[i].id}"> 
                            <div class="comment-avatar"><img src="${data.list[i].user_avatar}"alt=""></div>
                            <div class="comment-c">
                            <div>${data.list[i].user}<span>${data.list[i].postdate}</span></div>
                            <div>${data.list[i].detail}</div>`
                        if (data.list[i].user_id == uid) {
                            html += `<p><span>删除</span></p>`
                        }
                        html += `
                            </div>
                            </div>`
                    }
                    $(".comments-dom").html(html)
                } else if (data.code == 404) {
                    $(".comments-dom").html("暂无评论");
                }

                //删除   $(document).on("click", ".comment-c p span", function ()
                //  $(".comment-c p span").click(function ()
                $(document).on("click", ".comment-c p span", function () {
                    $(this).parents(".conmmentlist").remove();
                    // $(this).parents(".people").data("pid")
                    var id = $(this).parents(".conmmentlist").data("pid")
                    console.log(id)

                    $.post("http://localhost/20190918/yueduziji/api/delete.php", { id: id }, function (data) {
                        alert(JSON.parse(data).msg)
                        console.log(JSON.parse(data))
                    })
                    // var tianshu = $(".comment-list .tab span").html();
                    //     tianshu = --tianshu
                    //     $(".comment-list .tab span").html(tianshu);

                    $.getJSON("http://localhost/20190918/api/list.php", { article_id: index }, function (data) {
                        var dataLength = data.list.length;
                        $(".comment-list .tab span").html((dataLength));
                    })


                })
                //添加
                $(".comment-btn").click(function () {
                    //获取输入框的内容
                    var text = $(".content-text").val()
                    //获取用户的id
                    var id = $(".conmmentlist").data("pid")
                    console.log(id)
                    //获取文章ID
                    console.log(ID)
                    $.post("http://localhost/20190918/yueduziji/api/addComment.php", { article_id: ID, content: text }, function (data) {
                        console.log(JSON.parse(data))
                        //添加最新评论的
                        var data = JSON.parse(data)
                        var htm = ""
                        htm += ` 
                            <div class="conmmentlist" data-pid="${data.id}"> 
                            <div class="comment-avatar"><img src="${data.user_avatar}"alt=""></div>
                            <div class="comment-c">
                            <div>${data.user}<span>${data.postdate}</span></div>
                            <div>${data.detail}</div>`
                        if (data.user_id == uid) {
                            htm += `<p><span>删除</span></p>`
                        }
                        htm += `
                            </div>
                            </div>`
                        $(".comments-dom").prepend(htm)
                    })
                    //清空评论框
                    $(".comment-post input").val("")

                    //再次判断评论条数
                    $.getJSON("http://localhost/20190918/api/list.php", { article_id: index }, function (data) {
                        var dataLength = data.list.length;
                        console.log(dataLength)
                        $(".comment-list .tab span").html((dataLength));
                    })
                })
            })
        }
        )
    </script>
    <script src="./jquery-validation-1.14.0/dist/jquery.validate.js"></script>
    <script src="./js/additional-methods.js"></script>
    <script src="js/jquery.cookie.js"></script>

    <!-- 登陆 -->
    <script>


        var name = $.cookie('name')
        console.log(typeof name)
        if (name != 'undefined') {
            // $(".logo").html("Hello:" + name + "<br><span>退出</span>");
            $(".logo").html("Hello:" + name + "<br><span style=' cursor: pointer;'>退出</span>");

        }

        $(function () {
            $("#login1").validate({
                submitHandler: function () {
                    var str = $("#login1").serialize();
                    $.post("http://localhost/20190918/yueduziji/api/login.php", str, function (data) {
                        data = JSON.parse(data)
                        var password = $(".password").val()
                        var datapassword = data.password
                        var username = $(".ipttn").val()
                        console.log(username)
                        if (password == datapassword) {
                            alert("登陆成功")
                            $(".delete").click()
                            // 存储cookie+
                            $.cookie("name", username, { expires: 7 });
                            $.cookie("pwd", password, { expires: 7 });
                            //清空表单
                            $("#login1")[0].reset()
                            var name = $.cookie('name')
                            $(".logo").html("Hello:" + name + "<br><span    style='cursor: pointer;'>退出</span>");

                        } else {
                            alert("登陆失败")
                        }

                    })
                },
                rules: {
                    username: {
                        required: true,
                        remote: {
                            url: "http://localhost/20190918/yueduziji/api/checkusername.php",
                            type: "post",
                            data: {
                                username: function () {
                                    return $(".ipttn").val()
                                }
                            }
                        }
                    },
                    password: {
                        required: true
                    }

                },
                messages: {
                    username: {
                        required: "请输入用户名",
                        remote: "用户名不存在"
                    },
                    password: {
                        required: "请输入密码",
                    }
                }

            })
        })


        // $(".logo span").click(function () {

            $(".logo").on("click", "span", function (e) {
            $.removeCookie("name");
            $.removeCookie("pwd");
            console.log(0)
            location.reload();
            // $(".aaa").html("<a class='btn-login' href='javascript:;'> 登录</a><a class='btn-register' href ='javascript:;'>注册</a>")
            console.log(0)

        })


    </script>
    <!-- 注册 -->
    <script>
        $(function () {
            $("#form").validate({
                submitHandler: function () {
                    var str = $("#form").serialize();
                    console.log(str)
                    $.post("http://localhost/20190918/yueduziji/api/username.php", str, function (data) {
                        console.log(data)
                        data = JSON.parse(data)
                        if (data.code == 200) {
                            alert(data.msg)
                            $("#form")[0].reset()
                            $(".del").click()
                        }
                    })
                },
                rules: {
                    username: {
                        required: true,
                        user: true,
                        rangelength: [6, 11],
                        remote: {
                            url: "http://localhost/20190918/yueduziji/api/checkusername.php",
                            type: "post",
                            data: {
                                username: function () {
                                    return $(".btn").val()
                                }
                            }
                        }
                    },
                    usernameemail: {
                        required: true,
                    },
                    password: {
                        required: true,
                        cehckPassword: true
                    },
                    repassword: {
                        required: true,
                        equalTo: "#pwd"
                    }
                },
                messages: {
                    username: {
                        required: "请输入用户名",
                        rangelength: "用户名长度6-12位之间",
                        remote: "已存在用户名,更换一个!"
                    },
                    usernameemail: {
                        required: "请输入邮箱",
                        usernameemail: "格式是:小写字母开头，6-12位的字符"
                    },
                    password: {
                        required: "请输入密码",
                        cehckPassword: "密码格式不正确"
                    },
                    repassword: {
                        required: "请再次输入密码",
                        equalTo: "两次输入的密码不一致"
                    }
                }
            })
        })
    </script>

</body>

</html>